<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        button {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="output" style="width: 600px; height: 400px; background: #eee;"></div>
    <button id="rock" style="width: 80px; height: 40px;">石头</button>
    <button id="scissor" style="width: 80px; height: 40px;">剪刀</button>
    <button id="paper" style="width: 80px; height: 40px;">布</button>
</body>

<script>
    const $button = {
        rock: document.getElementById('rock'),
        scissor: document.getElementById('scissor'),
        paper: document.getElementById('paper')
    }
    const $output = document.getElementById('output')

    Object.keys($button).forEach(key => {
        $button[key].addEventListener('click', function() {
            fetch(`http://${location.host}/game?action=${key}`)
                .then((res) => {
                    return res.text()
                })
                .then((text) => {
                    $output.innerHTML += text + '<br/>'
                })
        })
    })
</script>
</html>